<template>
  <van-popup class="common-popup-1 project-popup" v-model="show" position="right" :style="{ height: '100%', width: '80%' }">
    <div class="popup-content">
      <van-checkbox-group v-model="selected" v-if="dataSource && dataSource.length">
        <van-cell-group>
          <van-cell v-for="(item, index) in dataSource" clickable :key="index" :title="`${item.name}`" @click="toggle(index)">
            <template #right-icon>
              <van-checkbox :name="index" ref="checkboxes" shape="square" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <empty-one v-else></empty-one>
    </div>
    <div class="popup-btn">
      <van-button square @click="show = false">取消</van-button>
      <van-button type="primary" square @click="ok">确定</van-button>
    </div>
  </van-popup>
</template>

<script lang="ts">
import { Component, Prop } from "vue-property-decorator";
import Base from "@/utils/base";
import { Button, Popup, Checkbox, CheckboxGroup, CellGroup, Cell } from "vant";
import Api from "@/api";
import EmptyOne from "@/components/EmptyOne.vue";

@Component({
  name: "NoteStakeholderPopup",
  components: {
    EmptyOne,
    VanButton: Button,
    VanPopup: Popup,
    VanCheckbox: Checkbox,
    VanCheckboxGroup: CheckboxGroup,
    VanCellGroup: CellGroup,
    VanCell: Cell
  }
})
export default class NoteStakeholderPopup extends Base {
  @Prop() formData!: any;
  @Prop() project!: any;
  private show = false;
  private dataSource: any[] = [];
  // 选中项，保存的是dataSource索引值
  private selected: any[] = [];

  private changeShow() {
    if (this.project && this.project.guid) {
      this.getData();
    }
  }

  /**
   * 创建formData 的map结构
   * key: formData[0].guid
   * value: formData[0]
   */
  private get formDataMap() {
    const _return: any = {};
    this.formData.map((item: any) => {
      _return[item.guid] = item;
    });
    return _return;
  }

  // 初始化选中项
  private initSelected() {
    this.selected = [];
    for (const [idx, item] of this.dataSource.entries()) {
      if (this.formDataMap[item.guid]) {
        this.selected.push(idx);
      }
    }
  }

  private async getData() {
    let toast: any = null;
    if (!this.dataSource || this.dataSource.length === 0) {
      toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "正在加载..."
      });

      const res = await Api.GetNoteStakeholderList({ projectGuid: this.project.guid });
      if (res.code === 200) {
        this.dataSource = res.data;
      }
    }

    this.initSelected();
    this.show = true;
    toast && toast.clear();
  }

  private toggle(index: number) {
    (this.$refs as any).checkboxes[index].toggle();
  }

  private ok() {
    this.$emit(
      "update:form-data",
      Array.from(this.selected, (item: number) => {
        return this.dataSource[item];
      })
    );
    this.show = false;
  }

  private clearData() {
    this.dataSource = [];
    this.selected = [];
  }
}
</script>

<style lang="less" scoped>
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border: 0;
}
</style>
